<template>
    <div>
        <!--栏目订阅-->
        <Category></Category>
        <!--tab切换-->
        <van-tabs class="tab" v-model="active">
            <van-tab title="历史今天">
                <div class="news-list">
                    <van-cell v-for="(item,index) in historyTodayList" :key="index">
                        <div class="content" style="height: 80px">
                            <div class="top">
                                <div class="year" style="color: #f34f4f">
                                    {{item.year}}
                                </div>
                                <router-link tag="div" class=more :to="{name:'historyDetails',params:{index:index}}">
                                    更多
                                    <van-icon name="arrow" />
                                </router-link>
                            </div>
                            <div class="middle" style="height: 40px">
                                <div class="title" style="width: 100%">
                                    {{item.title}}
                                </div>
                            </div>
                        </div>
                    </van-cell>
                </div>
            </van-tab>
            <van-tab title="推荐">
                <!-- 轮播图-->
                <Banner></Banner>
                <!--天气-->
                <Weather></Weather>
                <!--新闻列表-->
                <NewsList></NewsList>
            </van-tab>
            <van-tab v-for="(item,index) in subscriptionCategoryList" :title="item.name" :key="index">
            <!--tab内容 -->
                <!-- 轮播图-->
                <Banner></Banner>
                <!--天气-->
                <Weather></Weather>
                <!--新闻列表-->
                <NewsList :category-id="item.categoryId"></NewsList>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import Category from '../components/Category.vue';
    import NewsList from '../components/NewsList'
    import {
        getNews,
        historyToday
    } from "../api/CMS-api"
    import {Toast} from 'vant';
    import {LIST_SUBSCRIPT_CATEGORY} from "../constants/action-types";
    import {mapState} from "vuex";
    import Banner from '../components/Banner.vue'
    import Weather from '../components/Weather.vue'

    export default {
        created() {
            const readNumStr = localStorage.getItem('readNum') || '[]';
            this.readNum = JSON.parse(readNumStr);
            getNews(1, 12).then(res => {
                this.newsList = res.rows
            });
            //获取当前日期
            const date = new Date();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            historyToday('eed9a7a326471393', month, day).then(res => {
                this.historyTodayList = res.result
            });
            this.$store.dispatch(LIST_SUBSCRIPT_CATEGORY);
        },
        components: {
            Category,
            NewsList,
            Banner,
            Weather
        },
        data() {
            return {
                active: 1,
                bannerList: [],
                newsList: [],
                isLoading: false,
                loading: false,
                finished: false,
                offset: 0,
                subscriptionList: [],
                pickList: [],
                historyTodayList: []
            }
        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    Toast('刷新成功');
                    this.isLoading = false;
                }, 1000);
            },
            onLoad() {
                this.offset += 6;
                getNews(2, 6, this.offset).then(res => {
                    if (res.rows != null) {
                        this.newsList = this.newsList.concat(res.rows);
                        this.loading = false;
                    } else {
                        this.finished = true;
                        this.loading = false;
                    }
                })
            }
        },
        computed: {
            ...mapState({
                subscriptionCategoryList: "subscriptionCategoryList"
            })
        }
    }
</script>

<style lang="less" scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
    }
    .news-list {
        margin-bottom: 50px;
        .content {
            width: 100%;
            height: 170px;
            background-color: #ffffff;
            .top {
                width: 100%;
                height: 39px;
                border-bottom: 1px solid gainsboro;
                .source {
                    line-height: 40px;
                    float: left;
                    color: skyblue;
                    font-size: 16px;
                }
                .more {
                    line-height: 40px;
                    float: right;
                }
            }
            .middle {
                width: 100%;
                height: 95px;
                margin-top: 5px;
                .title {
                    float: left;
                    width: 60%;
                    height: 100%;
                    font-size: 18px;
                }
                .pic {
                    float: right;
                    width: 35%;
                    height: 100%;
                    margin-left: 5%;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .bottom-title {
                width: 100%;
                height: 30px;
                color: grey;
            }
        }
    }
    .hot-news {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 100px;
        left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .num {
            float: left;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #f34f4f;
            text-align: center;
            color: white;
            font-style: italic;
            margin-right: 5px;
        }
    }
    .year {
        line-height: 40px;
        float: left;
        color: skyblue;
        font-size: 16px;
    }
    /deep/ .tab[data-v-5a90ec03] {
        width: 100%;
    }
    /deep/ .van-tabs__wrap--scrollable .van-tabs__nav {
        width: 85%;
    }
</style>
